<template>
	<view class="home_list">
		<image src="@/static/images/h1.png" class="cover"></image>
		<view class="content">
			<view class="header">
				<view class="left">
					<image src="@/static/images/h2.png"></image>
					<view class="text">{{nickname}}的小酒馆</view>
				</view>
				<view class="right">
					<view class="item" @click="goHome">
						<image src="@/static/images/tabbar5.png"></image>
						<text>个人中心</text>
					</view>
					<view class="item" @click="share">
						<image src="@/static/images/h4.png"></image>
						<text>分享</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in data_list">
					<image :src="item.product.img" class="img"></image>
					<view class="item_view">
						<view class="item_info">
							<view class="name">{{item.product.name}}</view>
							<view class="stock">
								<view class="label">出售：{{item.sell_number}}瓶</view>
							</view>
						</view>
						<view class="item_foot">
							<view class="price">
								<view class="key">￥</view>
								<view class="value">{{item.underwrite.sell_price}}</view>
							</view>
							<view class="btn" @click="router(`/pages/home/goods_deta?id=${item.id}`)">立即参与</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" round="10" mode="center">
			<Share :link="link" />
		</uv-popup>
	</view>
</template>
<script setup>
	import {
		userInfo,
		underwriteShowcase
	} from "@/request/api";
	import Prove from "@/components/home/Prove.vue";
	import List from "@/components/home/List.vue";
	import Share from "@/components/common/Share.vue";

	import useWechat from "@/hooks/useWechat.js";
	import useBase from "@/hooks/useBase.js";
	import useShare from "@/hooks/useShare.js";
	import useLogin from "@/hooks/useLogin.js";

	const {
		wxShare
	} = useWechat();
	const {
		router
	} = useBase();
	const {
		shop_share,
		share_url
	} = useShare();
	const {
		wxLogin
	} = useLogin();

	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";
	// import useStore from "@/stores/index.js";
	// const {
	// 	useLoginStore
	// } = useStore();

	const data_list = ref([]);
	const nickname = ref("");

	const link = ref("");
	const getList = async () => {
		let {
			list,
			user
		} = await underwriteShowcase({
			users_id
		});
		data_list.value = list;
		nickname.value = user.nickname;
		let invitation = user.invitation_code;
		link.value = `${share_url}?users_id=${users_id}&is_share=true&invitation=${invitation}`;
		wxShare({
			title: `${nickname.value}${shop_share.title}`,
			desc: shop_share.desc,
			link: link.value,
			imgUrl: shop_share.imgUrl
		});
	};

	const goHome = () => {
		uni.switchTab({
			url: "/pages/tabbar/my"
		})
	};

	const popup = shallowRef();
	const share = () => popup.value.open();

	let is_share;
	let users_id = "";

	onLoad(async (options) => {
		users_id = options.users_id;
		let params = `?from=2&users_id=${users_id}`;
		await wxLogin(params);
		await getList();
	});
</script>

<style scoped lang="scss">
	.home_list {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		background: #F5F5F5;

		.cover {
			width: 100%;
			height: 830rpx;
		}

		.content {
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -30rpx;
			padding: 30rpx 25rpx;
			box-sizing: border-box;
			background: #F5F5F5;
			position: relative;
			z-index: 2;

			.header {
				display: flex;
				justify-content: space-between;

				.left {
					flex: 1;
					overflow: hidden;
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.text {
						flex: 1;
						color: #333333;
						font-size: 40rpx;
						font-weight: bold;
						padding-left: 8rpx;
						box-sizing: border-box;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.right {
					display: flex;

					.item {
						// width: 140rpx;
						height: 44rpx;
						border-radius: 22rpx;
						margin-right: 30rpx;
						border: 1px solid #666666;
						padding: 0 30rpx 0 24rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;

						&:last-child {
							margin-right: 0;
						}

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							color: #333333;
							font-size: 26rpx;
							padding-left: 10rpx;
							box-sizing: border-box;
						}
					}
				}
			}

			.list {
				padding-top: 40rpx;
				box-sizing: border-box;

				.item {
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					display: flex;

					.img {
						width: 240rpx;
						height: 240rpx;
						border-radius: 10rpx;
					}

					.item_view {
						flex: 1;
						min-height: 240rpx;
						padding: 12rpx 0 12rpx 22rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.item_info {
							.name {
								line-height: 36rpx;
								color: #333333;
								font-size: 26rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.stock {
								padding-top: 20rpx;
								box-sizing: border-box;
								display: flex;

								.label {
									height: 34rpx;
									line-height: 34rpx;
									color: #666666;
									font-size: 20rpx;
									border-radius: 3rpx;
									border: 1px solid #666666;
									padding: 0 14rpx;
									box-sizing: border-box;
									background: #FFFFFF;
								}
							}
						}

						.item_foot {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								color: #CA1C1D;
								display: flex;
								align-items: flex-end;

								.key {
									font-size: 28rpx;
									font-weight: bold;
								}

								.value {
									font-size: 40rpx;
								}
							}

							.btn {
								width: 170rpx;
								height: 60rpx;
								line-height: 60rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 26rpx;
								border-radius: 10rpx;
								background: #CA1C1D;
							}
						}
					}
				}
			}
		}
	}
</style>